<!DOCTYPE html>
<html class="x-admin-sm">
    <head>
        <meta charset="UTF-8">
        <title>主页</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="stylesheet" href="./css/font.css">
        <link rel="stylesheet" href="./css/xadmin.css">
        <script src="./lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="./js/xadmin.js"></script>
        <script src="./lib/date.format.js"></script>
        <script src="./lib/axios.min.js"></script>
        <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
        <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body ">
                            <blockquote class="layui-elem-quote">欢迎用户：
                                <div id="yh" class="layui-input-inline"></div>
                            </blockquote>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">数据统计</div>
                        <div class="layui-card-body ">
                            <ul class="layui-row layui-col-space10 layui-this x-admin-carousel x-admin-backlog">
                                <li class="layui-col-md3 layui-col-xs6">
                                    <a href="javascript:;" class="x-admin-backlog-body">
                                        <h3></h3>
                                        <p>
                                            <cite></cite></p>
                                    </a>
                                </li>
                                <li class="layui-col-md3 layui-col-xs6">
                                    <a href="javascript:;" class="x-admin-backlog-body">
                                        <h3></h3>
                                        <p>
                                            <cite></cite></p>
                                    </a>
                                </li>
                                <li class="layui-col-md3 layui-col-xs6">
                                    <a href="javascript:;" class="x-admin-backlog-body">
                                        <h3></h3>
                                        <p>
                                            <cite></cite></p>
                                    </a>
                                </li>
                                <li class="layui-col-md3 layui-col-xs6">
                                    <a href="javascript:;" class="x-admin-backlog-body">
                                        <h3></h3>
                                        <p>
                                            <cite></cite></p>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm6 layui-col-md4">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            <span class="layui-badge layui-bg-cyan layuiadmin-badge"></span></div>
                        <div class="layui-card-body  ">
                            <p class="layuiadmin-big-font"></p>
                            <p>
                                <span class="layuiadmin-span-color">
                                    <i class="layui-inline layui-icon layui-icon-face-smile-b"></i></span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm6 layui-col-md4">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            <span class="layui-badge layui-bg-cyan layuiadmin-badge"></span></div>
                        <div class="layui-card-body ">
                            <p class="layuiadmin-big-font"></p>
                            <p>
                                <span class="layuiadmin-span-color">
                                    <i class="layui-inline layui-icon layui-icon-face-smile-b"></i></span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm6 layui-col-md4">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            <span class="layui-badge layui-bg-cyan layuiadmin-badge"></span></div>
                        <div class="layui-card-body ">
                            <p class="layuiadmin-big-font"></p>
                            <p>
                                <span class="layuiadmin-span-color">
                                    <i class="layui-inline layui-icon layui-icon-face-smile-b"></i></span>
                            </p>
                        </div>
                    </div>
                </div>
            
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">系统信息</div> 
                            <div id="view" class="layui-card-body"></div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md12">
                </div>
                <style id="welcome_style"></style>
            </div>
        </div>
        </div>
        <script type="text/html" id="un">
            <span class="x-red">{{usrn}}</span>&nbsp;&nbsp;&nbsp;当前时间： {{ time}}
        </script>
        <script type="text/html" id="demo">
            <table class="layui-table">
                <tbody>
                <tr>
                    <th>系统版本</th>
                    <td>0.1</td></tr>
                <tr>
                    <th>数据库版本</th>
                    <td>12.1</td></tr>
                <tr>
                    <th>操作系统</th>
                    <td>{{info.os}}</td></tr>
                <tr>
                    <th>可用内存</th>
                    <td>{{info.mem}}</td></tr>
                <tr>
                    <th>剩余储存</th>
                    <td>{{info.disk}}</td></tr>
                </tbody>
            </table>
        </script>
        <script>
            var info;
            var usrn = localStorage.getItem("usrn");
            var time = new Date().format('Y-m-d H:i:s');
            axios.get("/info").then(res=>{
                info = res.data;
                layui.use('laytpl', function(){
                    var laytpl = layui.laytpl;
                    var getTpl = un.innerHTML
                    ,yh = document.getElementById("yh");
                    laytpl(getTpl).render(yh, function(html){
                        yh.innerHTML = html;
                    })
                    var getTpl_ = demo.innerHTML
                    ,view = document.getElementById('view');
                    laytpl(getTpl_).render(view, function(html){
                        view.innerHTML = html;
                    })
                })
            })
            

        </script>
    </body>
</html>